<template>
  <view class="auth-test-container">
    <view class="header">
      <text class="title">用户认证状态测试</text>
    </view>
    
    <view class="status-section">
      <view class="status-item">
        <text class="label">登录状态:</text>
        <text class="value" :class="isLoggedIn ? 'success' : 'error'">
          {{ isLoggedIn ? '已登录' : '未登录' }}
        </text>
      </view>
      
      <view class="status-item" v-if="token">
        <text class="label">Token:</text>
        <text class="value token">{{ token.substring(0, 50) }}...</text>
      </view>
      
      <view class="status-item">
        <text class="label">用户ID:</text>
        <text class="value">{{ userId || '未获取' }}</text>
      </view>
      
      <view class="status-item" v-if="userName">
        <text class="label">用户名:</text>
        <text class="value">{{ userName }}</text>
      </view>
      
      <view class="status-item">
        <text class="label">Store用户ID:</text>
        <text class="value">{{ storeUserId || '未获取' }}</text>
      </view>
    </view>
    
    <view class="test-section">
      <button @click="testCartAPI" class="test-btn">测试购物车API</button>
      <button @click="refreshStatus" class="test-btn">刷新状态</button>
      <button @click="getUserInfo" class="test-btn" v-if="isLoggedIn">获取用户信息</button>
      <button @click="goToLogin" class="test-btn" v-if="!isLoggedIn">去登录</button>
    </view>
    
    <view class="result-section" v-if="testResult">
      <text class="result-title">API测试结果:</text>
      <text class="result-content">{{ testResult }}</text>
    </view>
  </view>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getUserCartList } from '@/api/cart'
import { mapState } from 'vuex'
import storage from '@/utils/storage'
import constant from '@/utils/constant'

export default {
  data() {
    return {
      isLoggedIn: false,
      token: '',
      userId: '',
      userName: '',
      userInfo: {},
      testResult: ''
    }
  },
  
  computed: {
    ...mapState({
      storeUserId: state => state.user.id,
      storeUserName: state => state.user.name,
      storeToken: state => state.user.token
    })
  },
  
  onLoad() {
    this.checkAuthStatus()
  },
  
  onShow() {
    this.checkAuthStatus()
  },
  
  methods: {
    checkAuthStatus() {
      // 从多个来源获取用户信息
      this.token = getToken()
      this.isLoggedIn = !!this.token
      
      // 从storage获取用户ID
      this.userId = storage.get(constant.id) || uni.getStorageSync('user_id') || ''
      this.userName = storage.get(constant.name) || uni.getStorageSync('user_name') || ''
      
      // 从Vuex store获取用户信息
      if (this.storeUserId) {
        this.userId = this.storeUserId
      }
      if (this.storeUserName) {
        this.userName = this.storeUserName
      }
      
      console.log('认证状态检查:')
      console.log('Token:', this.token ? this.token.substring(0, 30) + '...' : '无')
      console.log('用户ID (storage):', storage.get(constant.id))
      console.log('用户ID (uni storage):', uni.getStorageSync('user_id'))
      console.log('用户ID (store):', this.storeUserId)
      console.log('用户名:', this.userName)
      console.log('登录状态:', this.isLoggedIn)
    },
    
    async testCartAPI() {
      try {
        this.testResult = '正在测试购物车API...'
        const response = await getUserCartList()
        
        this.testResult = `API调用成功:\n状态码: ${response.code}\n消息: ${response.msg}\n数据条数: ${response.data ? response.data.length : 0}`
        
        console.log('购物车API测试结果:', response)
      } catch (error) {
        this.testResult = `API调用失败: ${error.message || error}`
        console.error('购物车API测试失败:', error)
      }
    },
    
    refreshStatus() {
      this.checkAuthStatus()
      uni.showToast({ title: '状态已刷新', icon: 'success' })
    },
    
    async getUserInfo() {
      try {
        uni.showLoading({ title: '获取用户信息...' })
        const res = await this.$store.dispatch('GetInfo')
        this.checkAuthStatus()
        uni.hideLoading()
        uni.showToast({ title: '用户信息已更新', icon: 'success' })
        console.log('用户信息获取成功:', res)
      } catch (error) {
        uni.hideLoading()
        console.error('获取用户信息失败:', error)
        uni.showToast({ title: '获取用户信息失败', icon: 'error' })
      }
    },
    
    goToLogin() {
      uni.navigateTo({ url: '/pages/login' })
    }
  }
}
</script>

<style scoped>
.auth-test-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.status-section {
  background-color: white;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.status-item {
  display: flex;
  margin-bottom: 20rpx;
  align-items: flex-start;
}

.label {
  font-size: 28rpx;
  color: #666;
  width: 150rpx;
  flex-shrink: 0;
}

.value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  word-break: break-all;
}

.value.success {
  color: #52c41a;
}

.value.error {
  color: #ff4d4f;
}

.value.token {
  font-size: 24rpx;
  color: #1890ff;
}

.test-section {
  margin-bottom: 30rpx;
}

.test-btn {
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}

.result-section {
  background-color: white;
  border-radius: 15rpx;
  padding: 30rpx;
}

.result-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.result-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  white-space: pre-line;
}
</style>